<template>
  <!-- 缴费  添加按钮的弹框 -->
  <div>
    <el-dialog
      :title="title==='add'?'新增费用':'修改费用'"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <el-form :rules="addrules" :model="addInline" label-width="80px" ref="addRef">
        <!-- 费用类型 -->
        <el-form-item label="费用类型" prop="type">
          <el-select v-model="addInline.type">
            <el-option
              v-for="item in cost1"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 金额 -->
        <el-form-item label="金额">
          <el-input v-model="addInline.price"></el-input>
        </el-form-item>
        <!-- 账期 -->
        <el-form-item label="账期">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 小区 -->

        <el-form-item label="小区">
          <el-cascader
            :props="propsOptions"
            v-model="addInline.buildingid"
            :options="plot1"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>

        <!-- 缴费 -->
        <el-form-item label="缴费房间">
          <el-radio-group v-model="houseids">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1" @click.native="fn($event)">部分房间</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <!-- <span>这是一段信息</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="handleOK">确 定</el-button>
        <!-- <el-button type="primary" >确 定</el-button> -->

      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FeeDialong',
  data () {
    return {
      date: '',
      dialogVisible: false,
      addInline: {
        type: '',
        begindate: '',
        enddate: '',
        price: '',
        buildingid: '',
        houseids: []
      },
      houseids: 0,
      // 日期配置
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      // 联级

      propsOptions: {
        label: 'name',
        value: 'id',
        emitPath: false
      },
      // 添加的验证
      addrules: {
        // type: [
        //   { required: true, message: '请选择活动区域', trigger: 'change' }
        // ]
      }
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    },
    fn (a) {
      if (a.target.tagName !== 'INPUT') {
        return false
      }
      alert(111)
    },
    timeChange () {
      console.log(this.date)
      this.addInline.begindate = this.date[0]
      this.addInline.enddate = this.date[1]
    },
    // 点击确定按钮
    async handleOK () {
      // 第一步：要验证
      if (this.addInline.buildingid === '') {
        return this.$message.error('没有选择小区')
      }
      // 第二步：发送网络请求
      const aaa = await this.$api.Fee.reqFeeadd(this.addInline)
      console.log(aaa)
      this.dialogVisible = false

      if (aaa.data.errCode === 10000) {
        console.log(123)
        // 2.1 再调一下数据列表
        this.$parent.getFeeList()
        // 2.2 清空数据
        this.$refs.addRef.resetFields()
        this.date = ''
        // 2.3 关闭弹窗
        this.dialogVisible = false
      } else if (aaa.errCode === 10900) {
        this.$message.error(aaa.errMsg)
        // 跳转到房间列表
        // this.$router.push('')
      }
    },
    // 点击取消按钮
    cancle () {
      // 清空数据
      this.$refs.addRef.resetFields()
      this.date = ''
      // 关闭弹窗
      this.dialogVisible = false
    },
    handleClose () {
      // 清空数据
      this.$refs.addRef.resetFields()
      this.date = ''
      // 关闭弹窗
      this.dialogVisible = false
    }
  },
  props: {
    title: {
      type: String,
      default: '增加费用'
    },
    cost1: {
      type: Array,
      default: () => {}
    },
    plot1: {
      type: Array,
      default: () => {}
    }
  }
}
</script>

<style lang="less" scoped></style>
